<!-- 课程列表 组件 -->
<template>
  <!-- 组件外层容器 -->
  <view class="main">
	  <view class="lesson">
	  	<text>课程列表</text>
	  </view>
    <view class="course">
      <view
        class="courseItem"
        v-for="(item, index) in courseList"
        :key="index"
        @click="toCourseItem(item)"
      >
        <u-image
          :src="(index%4===0)?' https://jjboss.oss-cn-hangzhou.aliyuncs.com/static/app/img/agimg/publicKnowledge.png'
		  :(index%4===1)?'https://jjboss.oss-cn-hangzhou.aliyuncs.com/static/app/img/agimg/warningEducation.png'
		  :(index%4===2)?'https://jjboss.oss-cn-hangzhou.aliyuncs.com/static/app/img/agimg/postKnowledge.png'
		  :'http://jjboss.oss-cn-hangzhou.aliyuncs.com/aqattach/20220530/bc3a492c0379f8481c934312e5ac3504.png'"
          width="728rpx"
          height="240rpx"
          :fade="true"
          duration="100"
        />
        <view class="courseItemContent">
          <view>
            <u-image
              :src="item.thumb"
              width="186rpx"
              height="144rpx"
              :fade="true"
              duration="1000"
			  border-radius="20rpx"
            />
          </view>
          <view class="courseItemContentRight">
            <view class="courseItemContentRightTitle">{{ item.name }}</view>
            <view class="courseItemContentRightDescribe">
              {{ item.children_str }}
            </view>
            <view class="courseItemContentRightDetails">
              <span> {{ item.course_num }} </span>
              个课程 ｜
              <span> {{ item.chapter_num }} </span>
              小节 ｜ 共计
              <span> {{ item.total_duration }} </span>
              分钟
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 接口请求文件
import request from "@/common/js/request/course.js"; // 课程信息 相关接口

//公共方法引入
import { routerParamUrl } from "@/common/js/public/utils.js";

/**
 * 课程列表组件
 * @description 课程列表组件
 */

export default {
  name: "home-course-list",
  props: {
  	tag: { type: String, default: 'list-course' },
	bool: { type: Boolean, required : true },//触发刷新数据
	item_type: { type:Number , default : 1 },
	enterId :{ type :Number ,default : 0}
  },
 
	watch: {
		bool: {
			handler(newValue, oldValue) {
				request.homePageCourse({ success:res => { this.courseList = res }
   			})
   		},
   		immediate: true,
		}
	},     
	
	  // 页面数据
	data() {
		return {
		  courseList: [],
		};
	},
	
	methods: {
	//点击列表
		toCourseItem(item) {
			// var save_short = uni.$focus.varShortTime('get');
			// const { id } = save_short;
			let examObj 
			if(this.item_type === 2){
				examObj = {
					...item ,
					item_type:this.item_type,
					enterId:this.enterId
				}
			}else{
				examObj = { ...item }
		}

		const urlP = routerParamUrl(examObj);
		uni.navigateTo({ url: `/pagesB/pages/course/newList/index?${urlP}`});
	},
  },
};
</script>
<style lang="less" scoped>
.main {
	background-color: #F7F7F7;
	.lesson{
		width: 750rpx;
		height: 80rpx;
	}
	.lesson text{
		margin: auto;
		width: 136rpx;
		height: 80rpx;
		font-size: 34rpx;
		font-family: PingFangSC, PingFangSC-Medium;
		text-align: left;
		line-height: 80rpx;
		padding-left: 30rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #000;
	}
  width: 750rpx;
  height: 100%;
  .course {
    display: flex;
    flex-direction: column;
    align-items: center;
    .courseItem {
      width: 728rpx;
      height: 240rpx;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .courseItemContent {
        width: 680rpx;
        height: 210rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        left: 20rpx;
        top: 10rpx;
        .courseItemContentRight {
          margin-left: 20rpx;
          .courseItemContentRightTitle {
            font-size: 30rpx;
            color: #fff;
          }
          .courseItemContentRightDescribe {
            margin: 12rpx 0 18rpx 0;
            font-size: 24rpx;
            width: 436rpx;
            color: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .courseItemContentRightDetails {
            font-size: 24rpx;
            color: rgba(255, 255, 255, 0.65);
          }
        }
      }
    }
  }
}
</style>
